<template>
  <div
      class="jdf-node"
      :class="[`level-${data.level}`, { 'has-children': data.hasChildren, 'is-selected': isSelected }]"
      @contextmenu="handleContextMenu"
  >
    <div class="node-header">
      <button
          v-if="data.hasChildren"
          class="expand-toggle"
          @click.stop="toggleExpansion"
      >
        {{ data.isExpanded ? '[-]' : '[+]' }}
      </button>
      <span class="tag-name">&lt;{{ data.nodeName }}&gt;</span>
    </div>

    <div class="node-content">
      <div v-if="data.attributes.length" class="attributes">
        <div v-for="attr in displayAttributes" :key="attr.name" class="attribute">
          <span class="attr-name">{{ attr.name }}</span>
          <span class="attr-value" :title="attr.value">{{ truncateValue(attr.value) }}</span>
        </div>

        <div v-if="hasMoreAttributes" class="more-indicator">
          +{{ data.attributes.length - maxAttributes }} 更多...
        </div>
      </div>

      <div v-if="data.textContent" class="text-content" :title="data.textContent">
        {{ truncateText(data.textContent) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useEditorStore } from '@/stores/editorStore'
// Use type-only import for JDFAttribute
import type { JDFAttribute } from '@/models/jdf'
import type { NodeProps } from '@vue-flow/core' // Import NodeProps

// Merge NodeProps with your custom props
const props = defineProps<NodeProps<{
  nodeName: string
  attributes: JDFAttribute[]
  textContent?: string
  hasChildren: boolean
  level: number
  isExpanded: boolean
  childrenIds: string[]
}>>()

// Define emits to receive the context menu handler
const emit = defineEmits(['node-context-menu'])

const editorStore = useEditorStore()
const maxAttributes = 3

// Use the selected prop injected by Vue Flow
const isSelected = computed(() => props.selected)

const displayAttributes = computed(() => {
  return props.data.attributes.slice(0, maxAttributes)
})

const hasMoreAttributes = computed(() => {
  return props.data.attributes.length > maxAttributes
})

const truncateValue = (value: string) => {
  return value.length > 20 ? value.substring(0, 17) + '...' : value
}

const truncateText = (text: string) => {
  return text.length > 30 ? text.substring(0, 27) + '...' : text
}

const toggleExpansion = () => {
  editorStore.toggleNodeExpansion(props.id)
}

// Handler for the node's context menu event
const handleContextMenu = (event: MouseEvent) => {
    // We need to construct an object similar to NodeMouseEvent
    // Note: This might lack some specific properties Vue Flow adds
    const nodeEvent = {
        event: event,
        node: {
            id: props.id,
            type: props.type, // Add type from props
            position: props.position, // Add position from props
            data: props.data,
            selected: props.selected, // Add selected from props
            dragging: props.dragging, // Add dragging from props
            zIndex: props.zIndex, // Add zIndex from props
            // Add other necessary node properties if needed by the handler
        },
        // Add other NodeMouseEvent properties if required
    }
    // Emit the event upwards, passing the constructed event data
    emit('node-context-menu', nodeEvent)
}
</script>

<style lang="scss" scoped>
.jdf-node {
  padding: 8px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);
  width: 200px;

  &.is-selected {
    border: 2px solid var(--el-color-primary);
    box-shadow: 0 0 8px rgba(var(--el-color-primary-rgb), 0.5); // Add a subtle shadow for better visibility
  }

  .node-header {
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--el-border-color);
    display: flex;
    align-items: center;

    .expand-toggle {
      background: none;
      border: none;
      padding: 0 4px 0 0;
      margin: 0;
      cursor: pointer;
      font-size: 0.9em;
      color: var(--el-text-color-secondary);
      line-height: 1;
      &:hover {
        color: var(--el-text-color-primary);
      }
    }

    .tag-name {
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }

  .node-content {
    margin-top: 4px;

    .attributes {
      .attribute {
        display: flex;
        margin-bottom: 2px;
        font-size: 0.85em;

        .attr-name {
          font-weight: 600;
          margin-right: 4px;
          color: var(--el-color-success);

          &:after {
            content: '=';
            margin-left: 2px;
            color: var(--el-text-color-regular);
          }
        }

        .attr-value {
          color: var(--el-color-danger);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .more-indicator {
        font-size: 0.8em;
        color: var(--el-text-color-secondary);
        margin-top: 2px;
      }
    }

    .text-content {
      margin-top: 4px;
      font-size: 0.85em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--el-text-color-primary);
      font-style: italic;
    }
  }

  // 不同级别的节点使用不同的背景色
  @for $i from 0 through 5 {
    &.level-#{$i} {
      background-color: rgba(var(--el-color-primary-rgb), #{0.1 + $i * 0.05});
    }
  }
}
</style>